<template>
	<view class="container">
		<view class="income-info">
			<view class="block">
				<view class="title">
					<view class="line">
					</view>
					<view class="text">
						今日收徒
					</view>
				</view>
				<view class="box">
					<view class="item">
						<view class="top">
							<view class="number">
								{{info.todayCount}}
							</view>
							人
						</view>
						<view class="bottom">
							收徒数
						</view>
					</view>
					<view class="item">
						<view class="top">
							<view class="number">
								{{info.todayValidCount}}
							</view>
							人
						</view>
						<view class="bottom">
							有效收徒
						</view>
					</view>
				</view>
			</view>
			<view class="block">
				<view class="title">
					<view class="line">
					</view>
					<view class="text">
						累积收徒
					</view>
				</view>
				<view class="box">
					<view class="item">
						<view class="top">
							<view class="number">
								{{info.accumulateCount}}
							</view>
							人
						</view>
						<view class="bottom">
							收徒数
						</view>
					</view>
					<view class="item">
						<view class="top">
							<view class="number">
								{{info.accumulateValidCount}}
							</view>
							人
						</view>
						<view class="bottom">
							有效收徒
						</view>
					</view>
					<view class="item">
						<view class="top">
							<view class="number">
								{{info.accumulateCoin}}
							</view>
							金币
						</view>
						<view class="bottom">
							累积收益
						</view>
					</view>
				</view>
			</view>
			<view class="tips">
				注意: <br>
				① 有效徒弟👦🏻才会记录次数并且有金币收益<br>
				② 新邀用户需完成3轮任务才会成为有效徒弟<br>
				👉<navigator url="/pages/withdraw/list?flag=1">查看师徒收益记录</navigator>👈
			</view>
		</view>

		<view class="progress-bar">
			<view class="line">
				<view class="active-line" :style="`width: ${progress}%;`"></view>
				<view class="node" v-for='item,index in NumberOfGuests' :key='index'>
					<view class="prices">{{item.amount}}元</view>
					<view class="number">{{item.reachedNumber}}人</view>
					<view class="yuan"></view>
					<image class='red' v-if="item.hasOwnProperty('orderStatus')" :id="item.orderStatus==0?'breathe':'grey'"
						src="@/static/images/promotion-income/red.png" @click="receiveRedEnvelopes(item)" mode=""></image>
				</view>
			</view>
		</view>
	</view>

	<!-- 红包 -->
	<redPacket ref="redPacketRef" @updataParentInfo="getInfo()" />
</template>

<script setup>
	import {
		getprenticesstat
	} from "@/api/general.js"
	import {
		ref,
		nextTick
	} from "vue"
	import {
		onLoad
	} from "@dcloudio/uni-app";
	onLoad(() => {
		getInfo()
	})
	let NumberOfGuests = ref([{
			amount: 5,
			reachedNumber: 5
		},
		{
			amount: 10,
			reachedNumber: 20
		},
		{
			amount: 25,
			reachedNumber: 50
		},
		{
			amount: 50,
			reachedNumber: 100
		}
	])
	// 邀人进度条
	let progress = ref(0)
	function setProgress(num) {
		// debugger
		/**
		 * 进度条四个阶段
		 *  5元阶段 12.5
		 * 10元阶段 37.5
		 * 25元阶段 62.5
		 * 50元阶段 87.5
		 */
		if (num >= 5 && num < 20) {
			progress.value = 12.5
		} else if (num >= 20 && num < 50) {
			progress.value = 37.5
		} else if (num >= 50 && num < 100) {
			progress.value = 62.5
		} else if (num >= 100) {
			progress.value = 100
		}
	}

	let info = ref({})
	async function getInfo() {
		let res = await getprenticesstat()
		// console.log(res);
		info.value = res
		// 更新进度条
		setProgress(res.accumulateValidCount)
		// 更新红包状态
		let guestIndexMap = {};
		NumberOfGuests.value.forEach((item, index) => {
			guestIndexMap[`${item.amount}_${item.reachedNumber}`] = index;
		});
		res.recordList.forEach(returnedItem => {
			// 找到对应的 NumberOfGuests 数组项的索引
			let index = guestIndexMap[`${returnedItem.amount}_${returnedItem.reachedNumber}`];
			if (index !== undefined) {
				// 更新 orderStatus 和 orderId
				NumberOfGuests.value[index].orderStatus = returnedItem.orderStatus;
				NumberOfGuests.value[index].orderId = returnedItem.orderId;
			}
		});
	}

	// 红包弹框ref
	let redPacketRef = ref(null)
	// 打开师徒收益红包
	function receiveRedEnvelopes(item) {
		if (item.orderStatus === 0 && item.orderId) {
			redPacketRef.value.openApprenticeRedpacket(item.orderId)
		}
	}
</script>

<style lang="scss">
	.container {
		padding: 20rpx;

		.income-info {
			width: 694rpx;
			background: #FFFFFF;
			border: 2rpx solid #EDEDED;
			box-shadow: 0 0 2rpx 1rpx rgba(0, 0, 0, 0.1);
			border-radius: 10rpx;
			margin: 0 auto;

			.title {
				display: flex;
				align-items: center;
				padding: 20rpx;

				.line {
					width: 6rpx;
					height: 30rpx;
					background: #E7BB02;
					border-radius: 3rpx;
				}

				.text {
					margin-left: 10rpx;
					font-size: 28rpx;
					font-family: SourceHanSansCN;
					font-weight: 500;
					color: #302C2D;
				}
			}

			.box {
				display: flex;
				align-items: center;
				justify-content: space-around;
				border-bottom: 2rpx solid #E5E5E5;
				padding-bottom: 20rpx;

				.item {
					display: flex;
					flex-direction: column;
					align-items: center;

					.top {
						display: flex;
						align-items: center;

						.number {
							font-size: 36rpx;
							color: #E7BB02;
						}
					}

					.bottom {
						font-size: 26rpx;
						color: #302C2D;
					}
				}
			}

			.tips {
				width: 100%;
				height: fit-content;
				color: rgb(255, 0, 0);
				font-size: 30rpx;
				font-weight: bold;
				padding: 20rpx;
				line-height: 50rpx;
				
				navigator {
					color: #0000ff;
					text-decoration: underline;
					display: inline-block;
				}
			}
		}

		.progress-bar {
			width: 100%;
			margin: 20rpx 0;
			overflow-y: scroll;

			.line {
				width: 100%;
				height: 6rpx;
				border-radius: 10rpx;
				margin: 100rpx 0;
				background: #E5E5E5;
				display: flex;
				align-items: center;
				position: relative;

				.active-line {
					height: 100%;
					border-radius: 10rpx;
					background: #FFB400;
					position: absolute;
					left: 0;
					top: 0;
					transition: all .5s;
				}

				.node {
					width: 25%;
					height: 100%;
					position: relative;

					.prices {
						width: 100%;
						text-align: center;
						font-size: 48rpx;
						font-weight: bold;
						color: #FF0000;
						position: absolute;
						top: -80rpx;
					}

					.yuan {
						width: 14rpx;
						height: 14rpx;
						background-color: #ccc;
						border-radius: 50%;
						position: absolute;
						left: calc(50% - 7rpx);
						top: calc(50% - 7rpx);
					}

					.number {
						font-size: 26rpx;
						color: #302C2D;
						width: 100%;
						text-align: center;
						position: absolute;
						bottom: -60rpx;
					}

					.red {
						width: 38rpx;
						height: 38rpx;
						position: absolute;
						left: calc(50% - 19rpx);
						top: -15rpx;
					}
				}
			}
		}
	}
</style>